<template>
  <transition name="list-fade">
    <div class="playlist" v-show="showList" @click="hide">
      <div class="list-wrapper" @click.stop>
        <div class="list-header">
          <h1 class="title">
            <i class="icon" :class="iconMode" @click="changeMode"></i>
            <span class="text">{{modeTxt}}</span>
            <span class="clear" @click="confirmLayer">
              <i class="icon-clear"></i>
            </span>
          </h1>
        </div>
        <scroll class="list-content" :refreshDelay="refreshDelay" :data="sequenceList" ref="listContent">
          <transition-group name="list" tag="ul">
            <li class="item" v-for="(item,index) in sequenceList" :key="item.id" @click="selectItem(item,index)" ref="listItem">
              <i class="current" :class="currentIcon(item)"></i>
              <span class="text">{{item.name}}</span>
              <span class="like" @click.stop="clickFavorite(item)">
                <i :class="classFavorite(item)"></i>
              </span>
              <span class="delete" @click.stop="delateOne(item)">
                <i class="icon-delete"></i>
              </span>
            </li>
          </transition-group>
        </scroll>
        <div class="list-operate">
          <div class="add" @click="addSongShow">
            <i class="icon-add"></i>
            <span class="text">添加歌曲到队列</span>
          </div>
        </div>
        <div class="list-close" @click="hide">
          <span>关闭</span>
        </div>
      </div>
      <confirm text="是否清空播放列表" trueBtnTxt="清空" @trueBtnFne="clearSongList" ref="confirm"></confirm>
      <AddSong ref="AddSong"></AddSong>
    </div>
  </transition>
</template>

<script>
  import {
    mapGetters,
    mapActions
  } from "vuex";
  import Scroll from 'base/scroll/scroll';
  import {
    playMode
  } from 'common/js/config';
  import Confirm from 'base/confirm';
  import {
    playerMixin
  } from 'common/js/mixin';
  import AddSong from 'components/add-song';

  export default {
    name: "PlayList",
    mixins: [playerMixin],
    data() {
      return {
        showList: false,
        refreshDelay: 100
      };
    },
    components: {
      Scroll,
      Confirm,
      AddSong
    },
    computed: {
      modeTxt() {
        return this.mode === playMode.sequence ? '循环播放' : this.mode === playMode.loop ? '单曲循环' : '随机播放'
      }
    },
    methods: {
      show() {
        this.showList = true;
        setTimeout(() => {
          this.$refs.listContent.refresh();
          this.scrollTocurent(this.currentSong)
        }, 20)
      },
      hide() {
        this.showList = false;
      },
      // 图标
      currentIcon(item) {
        if (item.id === this.currentSong.id) {
          return 'icon-play'
        }
        return ''
      },
      // 点击切换
      selectItem(item, index) {
        // 如果随机播放
        if (this.mode === playMode.random) {
          index = this.playList.findIndex((song) => {
            return song.id === item.id
          })
        }
        // 如果顺序播放或者循环播放的时候
        this.setCurrentIndex(index)
        this.setPlayingState(true)
      },
      // 滚动
      scrollTocurent(item) {
        const index = this.sequenceList.findIndex((song) => {
          return song.id === item.id
        })
        this.$refs.listContent.scrollToElement(this.$refs.listItem[index], 200)
      },
      // 删除
      delateOne(item) {
        this.delateOneSong(item)
        if (!this.playList.length) {
          this.hide()
        }
      },
      // 弹层
      confirmLayer() {
        this.$refs.confirm.show()
      },
      // 添加歌曲列表显示
      addSongShow() {
        this.$refs.AddSong.show()
      },
      ...mapActions(['delateOneSong', 'clearSongList'])
    },
    watch: {
      currentSong(newSong, olgSong) {
        if (this.showList && newSong.id !== olgSong.id) {
          this.scrollTocurent(newSong)
        }
      }
    }
  };

</script>
